/**
 * Created by Administrator on 2016/8/24.
 */
(function(){
    var in_put = document.getElementById("in_put");
    var btns = document.getElementsByTagName("button");
    var content = document.getElementById("content");
//    var spanNum = document.getElementsByTagName("span");
    btns[0].onclick = NumLeftIn;
    btns[1].onclick = NumRightIn;
    btns[2].onclick = NumLeftOut;
    btns[3].onclick = NumRightOut;
    btns[4].onclick = NumMix;
    btns[5].onclick = Bubblesort;
    btns[6].onclick = Selectsort;
    btns[7].onclick = Insertsort;

})();

function Isempty(){
    if(!content.hasChildNodes()){
        return true;
    }else{
        return false;
    }
}
//创建span元素，即队列
function CreateSpan(){
    var temp =in_put.value;
    var NumHtml = document.createElement('span');
    var span = document.getElementsByTagName("span");
//    NumHtml.innerText = temp;
    NumHtml.onclick = DelNum;
    return NumHtml;
}
//计算队列数目
function Len(){
    var spanNum = document.getElementsByTagName("span");
    return spanNum.length;
}
//左侧进入
function NumLeftIn(){
    var temp =in_put.value;
    var NewSpan = CreateSpan();
    if(temp == ''){
        alert("没有数字！");
    }else if((/^[0-9]+$/).test(temp)){

        if(temp>=10 && temp<=100)
        {
            if(Len()<60){
                var newHeight = parseInt(temp);
                NewSpan.style.height = newHeight+"px";
                if(Isempty()){
                    content.appendChild(NewSpan);
                }else{
                    content.insertBefore(NewSpan,content.firstChild);
                }
            }else{
                alert("队列超过60了");
            }

        }else{
            alert("请输入10-100的数字");
        }

    }else{
        alert("请输入数字");
    }

}

function NumRightIn(){
    var temp =in_put.value;
    var NewSpan = CreateSpan();
    if(temp == ''){
        alert("没有数字！");
    }else if((/^[0-9]+$/).test(temp)){

        if(temp>=10 && temp<=100)
        {
            if(Len()<60){
            var newHeight = parseInt(temp);
            NewSpan.style.height = newHeight+"px";
             content.appendChild(NewSpan);
            }else{
                alert("队列超过60了");
            }

        }else{
            alert("请输入10-100的数字");
        }

    }else{
        alert("请输入数字");
    }
}

function NumLeftOut(){
    if(Isempty()){
        alert("没有数字了")
    }else{
        content.removeChild(content.firstChild);
    }
}

function NumRightOut(){
    if(Isempty()){
        alert("没有数字了")
    }else{
        content.removeChild(content.lastChild);
    }
}
//选中红色条条后将其删除
function DelNum(){
    this.parentNode.removeChild(this);
}
function swap(ele1,ele2){
    var temp;

        temp = ele1.offsetHeight;
        ele1.offsetHeight = ele2.offsetHeight;
        ele1.style.height = ele2.offsetHeight+'px';
        ele2.offsetHeight = temp;
        ele2.style.height = temp + 'px';

}
//选择排序
function Selectsort(){
    var spanNum = document.getElementsByTagName("span");
    var len = Len();
    var delay = 500;
    var i, j,min;
    i = 0;
    j = i+1;

    timer=setInterval(function(){
        min = i;
        if(i==len-1){
            clearInterval(timer);
        }if(i<=len-1){
            for(j = i+1;j<=len-1;j++){
                if(spanNum[j].offsetHeight<spanNum[min].offsetHeight){
                    min = j;
            }
            }if(i != min){
                swap(spanNum[i],spanNum[min]);
            }

        }
        ++i;
    },delay);
}
//打乱顺序
function NumMix(){

}
//冒泡排序
function Bubblesort(){
    var spanNum = document.getElementsByTagName("span");
    var len = Len();
    var delay = 50;
    var timer;
    var i = len - 1;
    var j = 0;
//    timer = setInterval(function(){
//
//        for(var i = 0;i<len-1;i++){
//            for(var j = 0;j<len-1;j++){
//                if(spanNum[j].offsetHeight>spanNum[j+1].offsetHeight){
//                    swap(spanNum[j],spanNum[j+1]);
//                    flag = true;
////                    timer=setInterval(swap(spanNum[j],spanNum[j+1]),delay);
//                }
//            }
//            if(flag){
//                flag = false;
//            }else{
//                clearInterval(timer);
//            }
//        }
//    },delay)

    timer = setInterval(function() {
        if(i < 1) {
            clearInterval(timer);
        }
        if(j == i) {
            --i;
            j = 0;
        }
        if (spanNum[j].offsetHeight > spanNum[j+1].offsetHeight) {
            swap(spanNum[j], spanNum[j+1]);

        }
        ++j;
    }, delay);

}
//插入排序
function Insertsort(){
    var spanNum = document.getElementsByTagName("span");
    var len = Len();
    var delay = 50;
    var timer;
    var i = 1;
    var j,delay,flag,outer,inner;
    outer = true;
    inner = false;
    j = i-1;
    delay = 100;
    var temp;
//    alert("123")
    timer = setInterval(function() {
        if(outer) {
            if(i == len) {
                clearInterval(timer);
                return ;
            }
            if(spanNum[i].offsetHeight < spanNum[i-1].offsetHeight) {
                temp = spanNum[i].offsetHeight;
                j = i - 1;
                outer = false;
                inner = true;
            } else {
                i++;
            }
        }
        if(inner) {
            if(j < 0 || spanNum[j].offsetHeight < temp) {
                spanNum[j+1].style.height = temp + "px";
                spanNum[j+1].offsetHeight = temp;
                i++;
                inner = false;
                outer = true;
            } else {
                spanNum[j+1].style.height = spanNum[j].style.height;
                spanNum[j+1].offsetHeight = spanNum[j].offsetHeight;
                j--;
            }
        }
    }, delay);

}